<template>
  <div id="cate" >
    <!-- nav-bar -->
    <nav-bar title="全部分类" />
    <!-- 侧边分类区域 -->
    <van-sticky  class="sidebar_container" :offset-top="48">
      <van-sidebar v-model="activeKey" @change="onSideBarChange">
      <van-sidebar-item v-for="item in categories" :title="item.typeName" :key="item.typeId" />
    </van-sidebar>
    </van-sticky>
    <!-- 主体内容区域 -->
    <div class="main">
        <product  v-for="product in productList" :key="product.id" :product="product"/>
    </div>
  </div>
</template>

<script>
import Product from '../components/Product.vue'
import { IMAGE_PREFIX } from '../config'
import NavBarVue from '../components/NavBar.vue'
export default {
  components: {
    product: Product,
    'nav-bar': NavBarVue
  },
  data () {
    return {
      // 当前分类下的产品列表
      productList: [],
      container: null,
      // 默认分类索引
      activeKey: 0,
      // 类别对象数组
      categories: []
    }
  },
  methods: {
    /**
     * 业务： 获取所有分类
     */
    getAllCategory () {
      // console.log('获取分类页面的类别数据和第一个分类下的商品数据')
      // // MOCK
      // this.categories = [
      //   { id: 101, name: '类别1' },
      //   { id: 102, name: '类别2' },
      //   { id: 103, name: '菜篮子配送' }
      // ]
      this.$http.get('/types/all')
        .then(({ data: resp }) => {
          console.log(resp)
          const { data, meta } = resp
          if (meta.code !== 200) {
            return this.$notify(meta.msg)
          }
          this.categories = data
        })
        .catch(error => {
          this.$notify(error)
        })
    },
    /**
     * 业务：根据分类id获取对应商品
     */
    getProductsByCateId (cateId) {
      console.log(`获取分类id为: ${cateId} 的所有商品`)

      this.$http.get(`/products/type?id=${cateId}`)
        .then(({ data: resp }) => {
          const { data, meta } = resp
          if (meta.code !== 200) {
            return this.$notify(meta.msg)
          }
          console.log(data)

          this.productsParser(data.list)
        })
    },
    // 处理sideBar 切换 ： index 当前分类的索引
    onSideBarChange (index) {
      // 根据索引获取当前分类下的商品id
      const id = this.categories.filter((_, i) => i === index)[0].typeId || 1
      this.getProductsByCateId(id)
    },
    /**
     *  商品数据解析器
     */
    productsParser (rowData) {
      console.log(rowData)
      const products = []
      rowData.map((product) => {
        const price = product.list[0].price
        const oldPrice = product.list[0].oldPrice
        const { id: productId, name, image: imageStr, info } = product
        const productObj = {}
        const image = IMAGE_PREFIX + imageStr.split(';')[0]
        productObj.name = name
        productObj.id = productId
        productObj.image = image
        productObj.price = price
        productObj.old_price = oldPrice
        productObj.desc = info
        products.push(productObj)
      })
      console.log(products)
      this.productList = products
    }
  },
  created () {
    // 获取分类数据
    this.getAllCategory()
    const defaultId = this.$route.query.type ? this.$route.query.type : 1
    this.activeKey = defaultId - 1
    this.getProductsByCateId(defaultId)
  }
}
</script>

<style lang="less">
#cate{
  width:100vw;
  box-sizing: border-box;
  display:flex;
  flex-direction: row;
  justify-content: flex-start;
  .sidebar_container{
    width:85px;
    background-color: #f7f8fa;
    .van-sticky,
    .van-sticky--fixed{
      width:100% !important;
    }
  }
  .main{
    box-sizing: border-box;
    width: 290px;
    margin-top:48px;
    z-index: 100;
  }
}
.van-sidebar-item{
  padding:15px 10px;
}
.van-sidebar-item--select::before{
  background-color:#5ba0f4;
  height: 30px;
  width:5px;
}
</style>
